* {
    padding: 0;
    margin: 0;
    list-style: none;
    text-decoration: none;
  }

html{
    font-size: 16px;
}


  .box {
    height: 50px;
    background-color: #222;
    .container {
      padding: 0;
      // 导航栏
      .navbar-header {
        .navbar-brand {
          padding: 0 15px;
          display: flex;
          align-items: center;
        }
      }
      .navbar {
        border: none;
        margin-bottom: 0;
      }
      .navbar-wrapper {
        .navbar-brand {
          padding: 0 15px;
          > img {
            width: 130px;
          }
        }
      }
    }
  }

  main{
   .lf{
       background-color: #8bc01f;
      .lf_con{
          .lf_row{
              margin: 3.75rem 0;
              .l{
                .title{
                    display: flex;
                    h1{
                        font-size: 3rem;
                        color: #fff;
                        &:first-child{
                            margin-right: .5rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color: #8bc01f;
                            width: 3.4375rem;
                            height: 3.4375rem;
                            background-color: #fff;
                            border-radius: 8%;
                        }
                    }
                }
                .txt{
                    color: #fff;
                    h3{
                        margin-bottom: 4.0625rem;
                    }
                    h5{
                        margin-bottom: 2.1875rem;
                        line-height:1.8rem;

                    }
                    a{ 
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: .875rem;
                        color: #a5cd5f;
                        width: 6.25rem;
                        height: 2.125rem;
                        background-color: #fff;
                        border-radius:5px;

                    }
                }
              }
              
          }
      }
   }
   .lp{
       background-color: #3393df;
       .lp_con{
           .lp_row{
               margin: 3.75rem 0;
               .l{
                .title{
                    display: flex;
                    h1{
                        font-size: 3rem;
                        color: #fff;
                        margin-bottom: 1rem;

                           &:first-child{
                            font-size: 2.5rem;
                            margin-right: .5rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color:#3393df ;
                            width: 3rem;
                            height: 3rem;
                            background-color: #fff;
                            border-radius: 8%;
                        }
                    }
                } 
               }
               .c{
                   margin-top: 6.25rem;
                   margin-bottom: 3.75rem;
                   h3{
                       color: #fff;
                       &:first-child{
                        //    margin-top: 6.25rem;
                       }
                      
                   }
                   h5{
                    color: #fff;
                    line-height: 2rem;
                }
               }
               .r{
                   margin-top: 13.75rem;
               }
           }
       }
   }
   .la{
       .la_con{
           .la_row{
               margin: 80px 0;
               .l{
                .title{
                    display: flex;
                   
                    h1{
                        font-size: 3rem;
                        color: #3393df;
                        margin-bottom: 1rem;

                           &:first-child{
                            font-size: 2.5rem;
                            margin-right: .5rem;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            color:#fff ;
                            width: 3rem;
                            height: 3rem;
                            background-color: #3393df;
                            border-radius: 8%;
                        }
                    }
                 }
               h4{
                   &:first-of-type{
                       color: #000;
                       margin-bottom: 2.5rem;
                   }
                   color: #64a9e5;
               }
               h5{
                   text-indent: 2rem;
                   height: 2.5rem;
                   line-height: 1.5rem;
                   margin-bottom: 2.1875rem;
               }
               img{
                   margin-left: 8.5rem;
               }
               }
           
           }
       }
   }
   .ls{
       background-color: #f7f7f7;
   }
  }

  //  尾部
  footer{
    //底部联系
    .bt{
      background-color: #3b3b3b;
        .bt_con{
          .bt_row{
           //  联系
            .txt{
              margin: 1.875rem 0;
              p{
                color: #9798a0;
                a{
                color: #9798a0;
                }
                &:first-child{
                  font-size: .875rem;
                }
                &:last-child{
                  font-size: .75rem;
                }
              }
            }
          }
         //  二维码
          .bt_pic{
            margin-top:2.3125rem;
              text-align: right;
            img{
              &:first-child{
                  &:hover+img{
                    display: block;
                  }
              }
              &:nth-child(3){
                margin: 0 0.8rem;
                &:hover +img {
                  display: block ;
                }
              }
              &:nth-child(5){
                &:hover+img{
                  display: block;
                }
              }

             //  隐藏
              &:nth-child(2){
               position: absolute;
               bottom: 40px;
               right: 69px;
               display: none;
              }
              &:nth-child(4){
               position: absolute;
               bottom: 40px;
               right: 15px;
               display: none;
              }
              &:last-child{
               position: absolute;
               bottom: 40px;
               right: -40px;
               display: none;
              }
            }
          
          }
        }
    }
 }
  

  // ipad端 >= 768px   < 992px
  @media screen and (min-width: 768px) and (max-width: 991px) {
    .box {
      height: 100%;
      .navbar-wrapper {
        .navbar {
          margin-bottom: 0;
        }
        // 语言
        #navbar {
          .dropdown {
            position: absolute;
            top: 0;
            right: 80px;
          }
        }
      }
    }
    main{
        // 一
        .lf{
            .lf_con{
                .lf_row{
                    .l{
                        .title{
                        }
                        .txt{
                            h3{
                                margin-bottom: 1rem;
                            }
                            h5{
                                margin-bottom: 1rem;
                            }
                        }
                    }
                    .r{
                        img{
                            width: 100%;
                        }
                    }
                }
            }
        }
        .lp{
            .lp_con{
                .lp_row{
                    .l,.r{
                        img{
                            width: 100%;
                        }
                    }
                    .l{
                        .title{
                            h1{display: flex;
                                font-size: 2rem;
                                align-items: center;

                            }

                        }
                    }
                    .c{
                        margin-bottom:0;
                    }
                }
            }
        }
        .la{
            .la_con{
                .la_row{
                    margin: 1.5rem 0;
                    .l{
                        h4{
                            &:first-of-type{
                                margin-bottom:.625rem;
                            }
                        }
                        h5{
                            margin-bottom: .625rem;
                        }
                    }
                }
            }
        }
       

    }
    footer{
        // 底部联系
        .bt{
         .bt_con{
           .bt_row{
            .ewm{
              width: 50%;
            } 
            img{
              &:nth-child(2){
                right:94px;
              }
              &:nth-child(4){
               right:40px;
             }
             &:last-child{
               right:-12px;
             }
            }
           }
         }
       }
     }
}


 // 移动端 < 768px
 @media screen and (max-width: 767px) {
    .box {
      height: 100%;
      .navbar-wrapper {
        .container {
          .navbar {
            margin-bottom: 0;
          }
          // 语言
          #navbar {
            position: absolute;
            left: 0;
            top: 50px;
            background-color: #222;
            width: 100vw;
          
          }
        }
      }
      
  }
  main{
      .lf{
          .lf_con{
              .lf_row{
                  margin: 0;
                  margin-bottom: 1.25rem;
                  .l{
                      .title{
                          h1{
                              display: flex;
                              align-items: center;
                              font-size: 2rem;
                              &:first-child{
                                width: 12%;
                                height: 12%;
                              }

                        }
                      }
                    .txt{
                        h3{
                            margin: 1.25rem 0;
                        }
                        h5{
                            margin: 1.25rem 0;
                        }
                    }
                  }
                
              }
          }
      }
      .lp{
          .lp_con{
              .lp_row{
                  margin: 0;
                  .c,.r{
                      margin: 0;
                  }
                  .l{
                    .title{
                        h1{
                            display: flex;
                            align-items: center;

                        font-size: 2rem;
                        &:first-child{
                          width: 12%;
                          height: 12%;
                        }
                      }
                    }
                  }
              }
          }
      }
      .la{
        .la_con{
            .la_row{
                margin: 1.5rem 0;
               .title{
                   h1{
                           font-size: 2rem !important;
                           display: flex;
                           align-items: center;
                       &:first-child{
                        width: 12% !important;
                        height: 12% !important;
                      }
                   }
               }
                .l{
                    h4{
                        &:first-of-type{
                            margin-bottom:.625rem;
                        }
                    }
                    h5{
                        margin-bottom: .625rem;
                    }
                }
            }
        }
    }
  }
  // 尾部
  footer{
    //底部联系
    .bt{
     .bt_con{
       .bt_row{
         .txt{
           margin: 1rem  0;
           p{
            
               margin-bottom: 0;
           }
         }
         .bt_pic{
           margin-top: 20px;
          .pic1{
            width: 20%;
          }
           .ewm{
             width:30%;
           }
           img{
             &:last-child{
               bottom: 28px;
               right: 3px;
             }
             &:nth-child(2){
               bottom:28px;
               right: 86px;
             }
             &:nth-child(4){
               bottom: 28px;
               right: 46px;
             }
           }
            
            
         }
       }
     }
   }
}
}